<!--
  .vue文件是vue项目中的组件文件，一个.vue文件就是一个组件
  .vue文件分为三大部分：template,script,style
  template:组件的模板
  script：需要导出组件对象
  style:组件的css样式  style标签如果添加了scoped，表示样式只对这个组件生效，不加则对整个页面的所有元素都生效
  <style scoped></style>
-->
<template>
  <div>
    <div class="tab-bar clear-fix">
      <div class="tab-item"><router-link to='/'>首页</router-link></div>
      <div class="tab-item"><router-link to='/friend'>好友</router-link></div>
      <div class="tab-item"><router-link to='/dongtai'>动态</router-link></div>
      <div class="tab-item"><router-link to='/setting'>设置</router-link></div>
    </div>
    <keep-alive>
    	<router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'app' //用于测试时，看是哪个组件出错了，可以不写name
}
</script>

<style scoped>
.tab-bar{
  position: fixed;
  bottom:0;
  width: 100%;
  text-align: center;
}
.tab-item{
	width:25%;
	line-height: 57px;
	border: 1px solid black;
	float: left;
}
</style>
